<template>
  <div class="alone-outBox f14">
    <el-tabs v-model="activeName" @tab-click="handleClickAll">
      <el-tab-pane label="已赞助会议" name="first">
      <div class="alone-topBox mb16">
      <div class="flex flex-warp flex_bt">
        <div class="flex flex-warp" style="align-items: center">
          <div class="mb16">
            <span>会议名称：</span>
            <el-input
              v-model="searchObj.title"
              placeholder="请输入关键字"
              class="width200 mr16"
            />
          </div>
          <div class="mb16 mr16">
            <span>赞助进程：</span>
            <el-select
              v-model="searchObj.state"
              placeholder="请选择"
              class="width200"
              clearable
            >
              <el-option
                v-for="item in stateList"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>赞助类型：</span>
            <el-select
              v-model="searchObj.ztype"
              placeholder="请选择"
              class="width200"
              clearable
            >
              <el-option
                v-for="item in ztypeList"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="mb16">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">查询</el-button>
          </div>
        </div>
        <div></div>
      </div>
    </div>
    <div class="tableBox" style="padding-top: 10px; padding-bottom: 0px">
      <el-tabs v-model="searchObj.tabstate" @tab-click="handleClick">
        <el-tab-pane label="全部" name="-1"></el-tab-pane>
        <el-tab-pane label="审核中" name="14"></el-tab-pane>
        <el-tab-pane label="已通过" name="15"></el-tab-pane>
        <el-tab-pane label="已完成" name="13"></el-tab-pane>
        <el-tab-pane label="已驳回" name="16"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表格 -->
    <div class="pd16">
      <el-table v-loading="loading" :data="DataTable" style="width: 100%">
        <el-table-column
          prop="title"
          label="会议名称"
          min-width="380"
          align="left"
        >
          <template slot-scope="scope">
            <div class="flex">
              <div class="mr20">
                <!-- <el-link
                  type="primary"
                  :href="'https://www.instrument.com.cn/webinar/meetings/' +scope.row.shortname +''"
                  target="_blank"
                  ><img :src="scope.row.seminarImg?scope.row.seminarImg:'https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/mrt.png'" width="104" height="69"
                /></el-link> -->
                <img :src="scope.row.seminarImg?scope.row.seminarImg:'https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/mrt.png'" width="104" height="69"/>
              </div>
              <div>
                <div>
                  <el-link
                  v-if="scope.row.shortname&&scope.row.shortname!=''&&scope.row.shortname!=null"
                    type="primary"
                    :href="'https://www.instrument.com.cn/webinar/meetings/' +scope.row.shortname +''"
                    target="_blank"
                    >{{ scope.row.title }}</el-link>
                    <span v-else>{{ scope.row.title }}</span>
                </div>
                <div class="mt16">
                  <span style="color:rgb(126, 134, 144)">
                    {{ scope.row.starttime }}--{{ scope.row.videoenddate2 }}
                  </span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="2"
          label="赞助类型"
          min-width="100"
          align="left"
        >
          <template slot-scope="scope">
            <div class="col7e8 mt20">{{ scope.row.ztype }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="sampleName"
          label="赞助进程"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.state == -1">全部</div>
            <div v-if="scope.row.state == 0" class="sh_body" > 赞助审核中</div>
            <div v-if="scope.row.state == 1" class="tg_body"> 赞助审核通过</div>
            <div v-if="scope.row.state == 2" class="bh_body"> 赞助审核驳回</div>
            <div v-if="scope.row.state == 3" class="cx_body"> 撤销赞助申请</div>
            <div v-if="scope.row.state == 10" class="sh_body"> 报告审核中</div>
            <div v-if="scope.row.state == 11" class="tg_body"> 报告审核通过</div>
            <div v-if="scope.row.state == 12" class="bh_body"> 报告审核驳回</div>
            <div v-if="scope.row.state == 13" class="cx_body"> 赞助服务完成</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="lyState"
          label="赞助主题"
          min-width="200"
          align="left"
        >
          <template slot-scope="scope">
            <div class="col4F5 left">{{ scope.row.subject_title }}</div>
            <div class="col7e8 left mt20">{{ scope.row.subject_starttime }}--{{ scope.row.subject_videoenddate }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="2"
          label="赞助报告"
          min-width="100"
          align="left"
        >
          <template slot-scope="scope">
            <div class="col4F5">{{ scope.row.report_title }}</div>
            <div class="col7e8 mt20">{{ scope.row.report_starttime }}</div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          min-width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.state == -1">全部</div>
            <div v-if="scope.row.state == 0">
              <div><el-button type="text" @click="checkInfo(scope.row)">查看会议赞助</el-button></div>
              <div><el-button type="text" style="color:#7E8790" @click="cancel(scope.row)">取消会议赞助</el-button></div>
            </div>
            <div v-if="scope.row.state == 1">
              <div><el-button type="text" @click="submitBG(scope.row)">上传赞助报告</el-button></div>
              <div><el-button type="text" style="color:#7E8790" @click="cancel(scope.row)">取消会议赞助</el-button></div>
            </div>
            <div v-if="scope.row.state == 2">
              <div><el-button type="text" @click="checkInfo(scope.row)">查看赞助详情</el-button></div>
              <div><el-button type="text" style="color:#7E8790" @click="deletenotes(scope.row)">删除申请记录</el-button></div>
            </div>
            <div v-if="scope.row.state == 3">
              <div><el-button type="text" style="color:#7E8790" @click="deletenotes(scope.row)">删除申请记录</el-button></div>
            </div>
            <div v-if="scope.row.state == 10">
              <div><el-button type="text" @click="checkInfo(scope.row)">查看赞助详情</el-button></div>
            </div>
            <div v-if="scope.row.state == 11">
              <div><el-button type="text" @click="checkInfo(scope.row)">查看赞助详情</el-button></div>
            </div>
            <div v-if="scope.row.state == 12">
              <div><el-button type="text" @click="submitBG(scope.row)">修改赞助详情</el-button></div>
            </div>
            <div v-if="scope.row.state == 13">
              <div><el-button type="text" @click="getMeetingList(scope.row)">获取会后数据报告</el-button></div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="alignRight">
      <Pagination
        :total="total"
        :page="searchObj.page"
        :limit="searchObj.limit"
        @pagination="paginations"
      />
    </div>
    </el-tab-pane>
    <el-tab-pane label="可赞助会议" name="second">
      <div style="margin: -16px;">
        <allsupport :isFirst="isFirst"></allsupport>
      </div>
      
    </el-tab-pane>

  </el-tabs>



  </div>
</template>
<script>
import Pagination from "@/components/Pagination/index.vue";
import allsupport from '@/views/surey/allSupport/index.vue'
import Cookies from "js-cookie";
import indexapi from "@/api/index";
import { changeDateFormat } from "@/utils/commin";
export default {
  components: {
    Pagination,
    allsupport
  },
  data() {
    return {
      activeName:'first',
      isFirst:false,
      searchObj: {
        imshowId: '',
        limit: 10,
        page: 1,
        state: "-1",
        tabstate: "-1",
        ztype:''
      },
      DataTable:[],
      total: 0,
      loading: false,
      reasonDia: false,
      returnReason: "",
      stateList: [
        { name: "全部", value: "-1" },
        { name: "赞助审核中", value: "0" },
        { name: "赞助审核通过", value: "1" },
        { name: "赞助审核驳回", value: "2" },
        { name: "撤销赞助申请", value: "3" },
        { name: "报告审核中", value: "10" },
        { name: "报告审核通过", value: "11" },
        { name: "报告审核驳回", value: "12" },
        { name: "赞助服务完成", value: "13" },
      ],
      ztypeList:[{name:'钻石赞助',value:'4'},{name:'金牌赞助',value:'1'},{name:'银牌展示',value:'5'},]
    };
  },
  mounted() {
    // this.getclassification();
    this.searchObj.imshowId=this.$store.getters.imShowId
    this.SearchList();
  },
  methods: {
    handleClickAll(tab, event){
      //  console.log(tab,event);
       if (tab.name=='second') {
        this.React()
        this.isFirst=false
       }else{
        
        this.isFirst=true
       }
    },
    getMeetingList(val){
      // this.$router.push({path:'/support/meetingList',query:{mid:val.subject_mid,time:val.videoenddate,reportmid:item.report_mid,isEvaled:item.isEvaled}})
      this.$router.push({name:'reportList',params:{mid:val.subject_mid,time:val.videoenddate,reportmid:val.report_mid,isEvaled:val.isEvaled}})
    },
    submitBG(val){
      // 1 12
      this.$router.push({path:'/support/report',query:{reportMid:val.report_mid,id:val.id}})
    },
    checkInfo(val){
     //0 赞助审核中 2 赞助审核驳回 10 报告审核中 11 报告审核通过
     if(val.state==0||val.state==2){
      this.$router.push({path:'/support/apply',query:{mid:val.mid,id:val.id}})
     }else {
      this.$router.push({path:'/support/report',query:{reportMid:val.report_mid,id:val.id,examine:1}})
     }
    },
    deletenotes(val){
      this.$confirm('删除记录后，将无法找回，请谨慎操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let form={
        id:val.id,
        imshowId:this.searchObj.imshowId,
      }
      indexapi.support.delSponsor(form).then(res=>{
      this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.SearchListBt()
    })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

    },
    cancel(val){
      this.$confirm('取消会议赞助，将会暂停审核流程，请谨慎操作！！！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let form={
        id:val.id,
        imshowId:this.searchObj.imshowId,
      }
      indexapi.support.cancelSponsor(form).then(res=>{
        this.$message({
            type: 'success',
            message: '取消成功!'
          });
          this.SearchListBt()
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });

    },
    handleClick(tab, event) {
      this.searchObj.videoStatus = tab.name;
      this.SearchListBt();
    },
    // 重置
    React() {
      this.searchObj = {
        imshowId: this.$store.getters.imShowId,
        limit: 10,
        page: 1,
        state: "-1",
        tabstate: "-1",
      };
      this.times = [];
      this.SearchList();
    },
    // 查询
    SearchListBt() {
      this.searchObj.limit = 10;
      this.searchObj.page = 1;
      this.SearchList();
    },

    SearchList() {
      this.loading = true;
      indexapi.support.getMySponsorMeeting(this.searchObj).then((res) => {
        this.loading = false;
        this.DataTable = res.data.records;
        this.DataTable.forEach((item) => {
          item.starttime = changeDateFormat(item.starttime);
          item.videoenddate2 = changeDateFormat(item.videoenddate);
          item.subject_starttime = changeDateFormat(item.subject_starttime);
          item.report_videoenddate = changeDateFormat(item.report_videoenddate);
          item.subject_videoenddate = changeDateFormat(item.subject_videoenddate);
          switch (item.ztype) {
            case 1:
            item.ztype='金牌赞助'
              break;
              case 3:
            item.ztype='金牌赞助'
              break;
              case 4:
            item.ztype='钻石赞助'
              break;
              case 5:
            item.ztype='银牌赞助'
              break;
            default:
              break;
          }
        });
        this.total = res.data.total;
      });
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit;
      this.searchObj.page = val.page;
      this.SearchList();
    },
    releaseInformation() {
      this.$router.push(`/content/solutionscheme/solution/addoredit`);
    },
  },
};
</script>
<style lang="scss" scoped>
.pd16 {
  padding: 6px 16px 16px;
  background: #fff;
}
.mb18 {
  margin-bottom: 16px;
}
.sh_body{
  width: 114px;
  text-align: center;
  display: inline-block;
font-size: 14px;
color: #0C7FF2;
line-height: 16px;
padding: 4px 10px;
background: #E7F2FE;
border-radius: 4px 4px 4px 4px;
border: 1px solid #0C7FF2;
}
.tg_body{
  width: 114px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
color: #00BE1E;
line-height: 16px;
padding: 4px 10px;
background: #E5F9E9;
border-radius: 4px 4px 4px 4px;
border: 1px solid #00BE1E;
}
.bh_body{
  width: 114px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
color: #FF6332;
line-height: 16px;
padding: 4px 10px;
background: #FFEFEB;
border-radius: 4px 4px 4px 4px;
border: 1px solid #FF6332;
}
.cx_body{
  width: 114px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
color: #7E8790;
line-height: 16px;
padding: 4px 10px;
background: #F5F7FA;
border-radius: 4px 4px 4px 4px;
border: 1px solid #E5EAF0;
}
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}
.flex_bt {
  justify-content: space-between;
}
.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
.staffinfo {
  width: 100%;
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  background-color: #ffffff;
  .staff-nav {
    width: 100%;
    @include flex(row, center, space-between);
    .nav-option {
      @include flex(row, center, flex-start);
      i {
        font-size: 14px;
        color: #4f5862;
        margin-right: 10px;
      }
      .option-name {
        color: #202933;
        font-size: 14px;
        margin-right: 20px;
      }
      .option-progress {
        @include flex(row, center, center);
        margin-right: 20px;
        .progress-num {
          font-size: 14px;
          color: #202933;
        }
      }
      ::v-deep .el-progress {
        width: 300px;
        margin-right: 20px;
        .el-progress-bar {
          border-radius: 0;
          .el-progress-bar__outer {
            border-radius: 0;
            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}
::v-deep .el-tabs__header{
  background: #fff;
    margin: 0;
    padding:0 15px;
}
</style>
